<script setup>
import { onMounted, ref, getCurrentInstance } from 'vue'
import Category from '../components/category/Category.vue'
import SourceItem from '../components/source/SourceItem.vue'
import request from '../api/index'
const proxy = getCurrentInstance()?.proxy
const titleFunction = [
  {
    type: 'search',
    placeholder: '请输入标题',
  },
  {
    type: 'button',
    text: '上传',
    typeButton: '',
  }
]
const url = ref({
  get:'/admin/share/searchShare',
  getCategory: '/admin/category/searchCategory',
})
const params = ref({
  categoryId: undefined,
  keyword: undefined,
})
const category = ref(null) 
const pagination = ref({
    currentPage: 1,
    pageSize: 8,
    totalCount: 0,
    totalPages: 1
})
const categoryList = ref([])
const sourceList = ref([])

const sizeChange = (page) => {
  pagination.value.currentPage = page
  getDataList()
}

const getDataList = body => {
  request.post(url.value.get, {
    page: pagination.value.currentPage,
    pageSize: pagination.value.pageSize,
    ...params.value,
    ...body
  }).then(res => {
    if (res.data.status ==='success') {
      sourceList.value = res.data.data
      pagination.value = res.data.pagination
    } else {
      sourceList.value = []
      if (res.data.errCode >= 500 ) {
        proxy.$message({ type: 'error', duration: 1000,  message: res.data.message })
      }
    }
  })

  request.get(url.value.getCategory + '?type=4').then(res => {
    if (res.data.status ==='success') {
      categoryList.value = res.data.data
    } else {
      categoryList.value = []
      if (res.data.errCode >= 500 ) {
        proxy.$message({ type: 'error', duration: 1000,  message: res.data.message })
      } else {
        proxy.$message({ type: 'warning', duration: 1000,  message: res.data.message })
      }
    }
  }) 
}

const updateDate = id => {
  if(id) {
    if (id === params.value.categoryId) {
      category.value.changeCategory(-1)
    }
  }
  getDataList()
}

const selectCategory = id => {
  pagination.value.currentPage = 1
  params.value.categoryId = id
  getDataList()
}
const inputKeywords = keyword => {
  pagination.value.currentPage = 1
  params.value.keyword = keyword
  getDataList()
}
const getCateName = id => {
  return categoryList.value.find(item => item.ID === id)?.category_name || '未分类'
}


onMounted(() => { 
  getDataList()
})

</script>

<template>
  <div class="source-view">
    <yk-space dir="vertical" :size="24" style="width: 100%">
      <top-title title="资源分享" :titleFunction="titleFunction"  @search="inputKeywords"  :categoryList="categoryList" />
      <Category :categoryList="categoryList" @selectCategory="selectCategory" :type="4" @updateDate="updateDate" ref="category" />
      <yk-space wrap style="width: 100%" :size="[24, 24]" v-if="sourceList.length > 0">
        <div class="source-items" v-for="(item, index) in sourceList" :key="item.ID"><source-item  :sourceInfo="item" :categoryName="getCateName(item.category_id)" @sUpdateDate="getDataList()"  /></div>
      </yk-space>
      <yk-pagination @change="sizeChange" style="margin-top: 12px;width:100%;justify-content: flex-end;" v-if="sourceList.length > 0" :default-page-size="pagination.pageSize" v-model:current="pagination.currentPage" :total="pagination.totalCount" />
      <yk-empty v-else style="width:100%;">
        <template #description>
          暂无分享资源
        </template>
      </yk-empty>
    </yk-space>
  </div>
</template>

<style scoped lang='less'>
.source-view {
  padding: 32px 32px 32px 232px;
  width: 100%;
  background-color: @bg-color-m;

  .source-items {
    width: calc((100% - 24px) / 2);
  }
}
</style>